<template>
	<div class="headerVery">
		<header class="headerWrapper" style="height: 120px;display: flex;align-items: center;">
			<div class="indexContainer">
				<el-row>
					<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
						<div class="headLeft">
							<router-link to="/">
								<img src="@/assets/img/logo.png" alt="">
								<div class="headTitle">
									<h1>数据资产运营平台</h1>
									<h4>Data Asset Operation Platform</h4>
								</div>
							</router-link>
						</div>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10" class="hidden-md-and-down">
						<div class="headNav">
							<el-input v-model="$store.state.user.title" placeholder="请输入关键字">
								<el-button slot="append" class="themeGradientColor" type="primary" icon="el-icon-search"
									style="color: white;" @click="handleSearch">立即搜索</el-button>
							</el-input>
							<div style="margin-top: 5px;">
								<span class="searchHot" style="cursor: auto;">热门搜索:</span>
								<template v-for="item in $store.state.user.hotList">
									<span class="searchHot" @click="handleSearchHot(item.name)">{{ item.name }}</span>
								</template>
							</div>
						</div>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
						<div v-if="isLogo" style="text-align: right;" class="imgs">
							<!-- 购物车 -->
							<el-badge :value="$store.state.user.count" class="item">
								<img style="width: 25px;height: 25px;cursor: pointer;" src="@/assets/images/cs5.png"
									@click="handleShop" />
							</el-badge>
							<img style="width: 24px;height: 24px;margin:0 20px;cursor: pointer;"
								src="@/assets/images/cs6.png" @click="toPersonalCenter" />
							<img style="width: 24px;height: 24px;cursor: pointer;" src="@/assets/images/cs7.png"
								@click="getLogOut" />
						</div>
						<div v-else style="text-align: right;">
							<router-link class="loginTo" to="/login">登录</router-link>
							<!-- <router-link class="registerTo" style="margin-left: 15px;" to="/register">免费注册</router-link> -->
						</div>
					</el-col>
				</el-row>
			</div>
			<!-- <div class="indexOption hidden-md-and-down">
				<div class="userActar" v-if="isLogo">
					<el-dropdown @command="handleCommand">
						<div class="userInfo">
							<div class="userItem">
								<p class="userName">
									<span style="position: relative;display: inline-block;vertical-align: middle;">
										<img class="avatarImg" v-if="userInfo.avatar" width="30" :src="userInfo.avatar"
											alt="">
										<img v-if="userInfo.serveExpert == '1'" class="tipImg" width="12"
											src="@/assets/img/vip.png" alt="">
									</span>

									<span>{{ userInfo.nickName }}</span>
								</p>
							</div>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="1">个人中心</el-dropdown-item>
							<el-dropdown-item command="5">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div v-else>
					<router-link class="loginTo" to="/login">登录</router-link>
					<router-link class="registerTo" to="/register">免费注册</router-link>
				</div>
			</div> -->



			<!-- 手机端显示内容 -->
			<div class="phoneContainer" style="display: none;">
				<div class="userActar" v-if="isLogo">
					<el-dropdown @command="handleCommand">
						<div class="userInfo">
							<div class="userItem">
								<p class="userName">
									<img width="30" src="@/assets/images/industryNews8.png" alt="">
									<span>{{ userInfo.nickName }}</span>
								</p>
							</div>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="1">个人中心</el-dropdown-item>
							<el-dropdown-item command="5">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div v-else>
					<router-link class="loginTo" to="/login">登录</router-link>
					<router-link class="registerTo" to="/register">免费注册</router-link>
				</div>

				<div class="mNavBtn" @click="handlePhone" :class="{ phoneActive: isActive }">
					<span class="line1"></span>
					<span class="line2"></span>
					<span class="line3"></span>
				</div>
				<div class="m-navbox" :class="{ boxActive: isActive }">
					<ul>
						<!-- <template v-for="item in $store.state.user.menuList">
							<li>
								<router-link :to="item.url">{{item.menuName}}</router-link>
							</li>
						</template> -->

						<li>
							<a href="/index">首页</a>
						</li>
						<li>
							<a href="/ApplicationProducts">应用产品</a>
						</li>
						<li>
							<a href="/">数据资源</a>
						</li>
						<li>
							<a href="/ExchangeResults">成果交流</a>
						</li>
						<li>
							<a href="/AlgorithmTools">算法工具</a>
						</li>
						<li>
							<a href="/studyGarden">学习园地</a>
						</li>
						<li>
							<a href="/demandCollect">需求征集</a>
						</li>
					</ul>
				</div>
			</div>
		</header>

		<header class="headerWrapper">
			<div class="indexContainer">
				<el-row>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="hidden-md-and-down">
						<div class="headNav" style="display: flex;justify-content: center;">
							<ul>
								<!-- <template v-for="item in $store.state.user.menuList">
									<li>
										<router-link :to="item.url">{{item.menuName}}</router-link>
									</li>
								</template> -->
								<li>
									<router-link to="/index">首页</router-link>
								</li>
								<li>
									<router-link to="/ApplicationProducts">应用产品</router-link>
								</li>
								<li>
									<router-link to="/">数据资源</router-link>
								</li>
								<li>
									<router-link to="/ExchangeResults">成果交流</router-link>
								</li>
								<li>
									<router-link to="/AlgorithmTools">算法工具</router-link>
								</li>
								<li>
									<router-link to="/studyGarden">学习园地</router-link>
								</li>
								<li>
									<router-link to="/demandCollect">需求征集</router-link>
								</li>
							</ul>
						</div>
					</el-col>
				</el-row>
			</div>
		</header>
		<!-- <p style="height:70px"></p> -->
		<!-- 菜单导航 -->
		<!-- 右下角固定-->
		<!-- <el-backtop>
			<div class="scroll-bar">
				<ul>
					<li class="barList">
						<el-popover placement="left" width="180" trigger="hover">
							<img class="codeImg" src="@/assets/img/code.png" alt="">
							<p class="codeText">关注公众号</p>
							<div slot="reference">
								<img class="grayImg" src="@/assets/images/r1.png" alt="" />
								<img class="whiteImg" src="@/assets/images/r1_w.png" alt="" />
							</div>
						</el-popover>
					</li>
					<li class="barList">
						<el-popover placement="left" width="240" trigger="hover">
							<div class="barPhone">
								<p class="phoneTitle">联系电话：{{ caaldata }}</p>
								<p class="phoneText"></p>
								<p class="phoneTitle">工作时间：</p>
								<p class="phoneTip">周一至周五 早8:30-晚7:00</p>
								<p class="phoneTip">周六至周日 早9:00-晚6:00</p>
							</div>
							<div slot="reference">
								<img class="grayImg" src="@/assets/images/r2.png" alt="">
								<img class="whiteImg" src="@/assets/images/r2_w.png" alt="" />
							</div>
						</el-popover>
					</li>
					<li class="barList" :bottom="110" :right="40">
						<div>
							<img class="grayImg" src="@/assets/images/r3.png" alt="">
							<img class="whiteImg" src="@/assets/images/r3_w.png" alt="" />
						</div>
					</li>
				</ul>
			</div>
		</el-backtop> -->
		<!-- 在线咨询 -->
		<Online ref="onlineContent" />
	</div>
</template>
<script>
import {
	navigaatorList
} from "@/request/api/navigationBar";
import {
	logOut
} from "@/request/api/login.js";
import {
	getUserInfo2
} from "@/request/api/user"
import UserLogin from "@/components/home/userLogin/userLogin";
import Nav from "./nav.vue"
import Online from "@/components/personalCenter/online/online"
import {
	getQueryDictByCode
} from "@/request/api/xxyd";
import {
	getAllMenuList
} from "@/request/api/user";
import { shopCount } from "@/request/api/shopCart"
export default {
	components: {
		UserLogin,
		Nav,
		Online
	},
	data() {
		return {
			newShow: false,
			menuList: [],
			show: -1,
			userInfo: {},
			isLogo: false,
			caaldata: '', //联系电话
			dispositionTr: {
				name: "联系电话", //名称
			},
			isActive: false
		};
	},
	created() {
		this.bus.$on('shopCount', () => {
			this.getShopCount();
		});
		this.getAllMenuList()
		this.getInfo()
		this.getHotList()

	},
	methods: {
		// 获取菜单
		getAllMenuList() {
			getAllMenuList().then((res) => {
				this.$store.commit('user/SET_MENULIST', res.data.data)
			})
		},
		// 获取热门
		getHotList() {
			getQueryDictByCode({ code: 'rmss' }).then((res) => {
				this.$store.commit('user/SET_HOTLIST', res.data.data.childList)
			})
		},
		// 获取购物车数量
		getShopCount() {
			let params = {
				userId: this.userInfo.id
			}
			shopCount(params).then((res) => {
				console.log(res)
				this.$store.commit('user/SET_COUNT', res.data.data)
			})
		},
		// 点击关键词
		handleSearchHot(str) {
			this.$store.commit('user/SET_TITLE', str)

			this.$router.push({
				name: "search"
			});
		},
		// 立即搜索
		handleSearch() {
			this.$router.push({
				name: "search"
			});
		},
		// 个人中心
		toPersonalCenter() {
			this.$router.push("/personal");
		},
		handlePhone() {
			this.isActive = !this.isActive
		},
		// 购物车
		handleShop() {
			this.$router.push("/shopCart");
		},
		// 获取用户信息
		getInfo() {
			if (window.sessionStorage.getItem("userInfo") !== null) {
				this.isLogo = true
				this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
				// console.log('this.userInfo',this.userInfo)
				this.getShopCount()
			} else {
				this.isLogo = false
			}

			// getUserInfo2().then(res => {
			// 	if (res.data.code === 200) {
			// 		this.userInfo = res.data.result
			// 		this.isLogo = true
			// 	} else {
			// 		this.isLogo = false
			// 	}
			// })
		},
		// 右上角点击事件
		handleCommand(command) {
			if (command == "1") {
				this.$router.push("/msgCenterNone");
			} else if (command == "5") {
				this.getLogOut()
			}
		},
		// 退出登录
		getLogOut() {
			this.$confirm("是否确认退出登录?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				this.getOutResult()
			});
		},
		// 退出接口
		getOutResult() {
			logOut().then((res) => {
				if (res.data.code == 1) {
					this.$message({
						message: '退出成功！',
						type: "success",
					});
					sessionStorage.clear();
					this.$cookie.remove("access_token");
					if (this.$route.path === "/login") {
						location.reload();
					} else {
						this.$router.push("/login");
					}
				} else {
					this.$message.error(res.data.message);
				}
			});
		},
	},
};
</script>
<style lang="less" scoped>
@import "./header.less";
@import "./media.less";
.loginTo{
	color:#333;
}
</style>